<template>
<div>
<el-container>
  <!-- 导航内容 -->
  <el-aside width="200px">
    <div class="zitibox"><br>
      <h1 class="ziti">大萝卜🥕<span>理赔</span></h1>
      <el-rate v-model="value" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
    </div>
    <el-menu style="height :85%" default-active="1" background-color="#425877" text-color="#fff" active-text-color="#FFFFFF"  :router="true" :unique-opened="true">
      <template v-for="item in getmenuInfo">
      <el-submenu :index="item.perms" :key="item.id" v-if="item.children && item.children.length > 0">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
        <Submenu :datas="item.children"></Submenu>
      </el-submenu>
      <el-menu-item :index="item.perms" :key="item.id" v-else>
        <i :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
  <!-- 左边内容 -->
  <el-main>
    <!-- 导航 -->
      <div class="nav">
          <h4>{{navheadline}}</h4>
          <div class="profile_photo">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">{{usermage.username}}<i class="el-icon-caret-bottom el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item  class="clearfix" ><span @click="particulars">账户详情 <i class="el-icon-user-solid"></i></span></el-dropdown-item>
                  <el-dropdown-item class="clearfix"><span @click="quitLogin">退出登录 <i class="el-icon-s-promotion"></i></span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <img @click="particulars" :src="usermage.image" alt="" title="点击设置">
          </div>
      </div>
      <div class="box">
          <!-- 项目内容 -->
          <router-view/>
      </div>
      <!-- 账户详情模态框 -->
    <el-dialog title="用户信息" :visible.sync="dialogVisible" width="30%">
      <!-- 用户头像以及更改 -->
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl()"
        :headers="headerObj"
        name="image"
        :show-file-list="false"
        :auto-upload="true"
        :on-change="handleChange"
        :on-success="Onsuccess"
        :multiple="false">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="boxs">
        <p class="phone">账号: <span>{{usermage.phone}}</span></p>
        <p class="username">用户名: &nbsp; <span @click="rename" title="点击修改用户名">{{usernameMode}} <i class="el-icon-edit"></i></span></p>
        <p class="quanx">用户ID: &nbsp;&nbsp;&nbsp;&nbsp;<span>{{usermage.id}}</span></p>
      </div><br><br><br>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="warning" @click="ok" >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改账户名模态 -->
    <el-dialog
      title="修改用户名"
      :visible.sync="visible"
      width="30%">
      <el-input placeholder="请输入您需要修改的内容" v-model="nameinput" clearable></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="yes">确 定</el-button>
      </span>
    </el-dialog>
  </el-main>
</el-container>
</div>
</template>
<style lang="less" scoped>
  /deep/.el-dropdown-menu{
    top: 999px !important;
  }
  .element.style{
    top:20px !important;
  }
  .el-rate{
    margin-left: 10%;
    margin-top: 10%;
  }
  .zitibox{
    height: 15%;
    background-color: #425877;
  };
  .ziti{
    color: white;
    font-family:STXingkai;
    font-size: 26px;
    margin-left: 5%;
  }
  .el-menu-item.is-active {
    background-color: rgb(253,150,46) !important;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
  }
  .el-main {
    height: 100vh;
    background-color: rgb(241,242,246);
    color: #333;
    padding: 0px;
  }
  .box{
      width: 100%;
      height: 93%;
      box-sizing: border-box;
      padding: 25px;
  }
  .nav{
      width: 100%;
      height: 50px;
      background-color: white;
      overflow: hidden;
      box-sizing: border-box;
      padding:0 20px ;
      h4{
        line-height: 50px;
        float: left;
      }
      .profile_photo{
          width: 150px;
          height: 100%;
          float: right;
          overflow: hidden;
          img{
              width: 40px;
              height: 40px;
              border-radius: 40px;
              margin-top: 5px;
              cursor: pointer;
              float: right;
          }
          /deep/.el-dropdown{
            line-height: 50px;
            display: inline-block;
            float: left;
          }
      }
  }
    /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/.avatar-uploader{
    width: 100px;
    height: 100px;
  }
  /deep/.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  /deep/.avatar {
    width: 100px;
    height: 100px;
    display: block;
    margin: auto;
  }
  /deep/.el-dialog__body{
    padding: 10;
    margin: 0;
    // margin-left: 15%;
  }
  .username{
    margin: -50px;
    cursor: pointer;
    margin-top: -40px;
    margin-left: 40%;
    i{
      font-size: 20px;
      color: red;
    }
  }
  .quanx{
    margin: -50px;
    margin-top: -40px;
    margin-left: 40%;
    span{
      color: royalblue;
    }
  }
  .phone{
    margin: -50px;
    margin-top: -40px;
    margin-left: 40%;
  }
  .boxs{
    margin-top: 10px;
  }
</style>
<script>
  import router from "../router/index"; 
  // import {mapGetters} from 'vuex'
  import Submenu from './Submenu.vue'
  import {change_information} from '@/util/routeraxios'
  export default {
    data(){
      return {
        headerObj:{token:JSON.parse(sessionStorage.getItem('token'))},
        usermage:{},
        value: 4.5, //评分
        getmenuInfo:[], //菜单数据
        dialogVisible: false, //用户详情模态框
        visible:false, //修改用户名模态框
        usernameMode:'', //修改用户名模态框
        imageUrl:'', //修改图片
        nameinput:'', //修改的用户名输入框
        navheadline:'权限业务',  //导航标题
        imageUrlresult:''  //修改图片成功后的
      }
    },
    components:{
      Submenu  //注册菜单子组件
    },
    // computed:{
    //   ...mapGetters(['getmenuInfo','getuserInfo']),
    // },
    created(){
      console.log(router.options.routes,7777777777)
      this.usermage = JSON.parse(sessionStorage.getItem('suer'))  //用户信息
      this.getmenuInfo = JSON.parse(sessionStorage.getItem('menudata'))  //菜单数据
    },
    methods:{
      quitLogin(){  //退出登录按钮
        console.log('退出登录');
        this.$confirm('是否需要退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('quitLogin')
          this.$router.push('/')
          this.$message({
            type: 'success',
            message: '退出登录成功返回登录页面!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });          
        });
      },
      particulars(){  //用户详情
        this.imageUrl = this.usermage.image
        this.imageUrlresult = this.usermage.image
        this.usernameMode = this.usermage.username
        this.dialogVisible = true
      },
      // 关于上传图片函数
      handleChange(file,fileList){
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      uploadUrl(){ //返回给后端接口地址
        return 'http://1.117.91.107:8080/big_turnip/upload'
      },
      Onsuccess(res){
        console.log(res);
        this.imageUrlresult = res.data
      },
      // 确认修改信息函数(发亲求
      ok(){
        console.log('名字',this.usernameMode,'角色ID',this.usermage.id,'角色图片',this.imageUrlresult);
        change_information({
          id:this.usermage.id,
          image:String(this.imageUrlresult),
          username:this.usernameMode,
        }).then((response)=>{
          console.log(response.data);
          if(response.data.code == 0){
            this.$message({
                message: '修改成功！(请重新登录后查询修改内容)',
                type: 'success'
            });
          }
        }).catch((err)=>{
          console.log('导航修改信息出错',err);
        })
        this.dialogVisible = false
      },
      // 修改名字的函数
      rename(){
        this.nameinput = this.usernameMode
        this.visible = true
      },
      // 确定修改按钮
      yes(){
        if(this.nameinput.length == 0){
          this.$message({
            message: '请您确认是否填写修改后账号名',
            type: 'warning'
          });
        }else{
          console.log(this.nameinput.length);
          this.usernameMode = this.nameinput
          this.visible = false
        }
      }
    }
  }
</script>
